import React, { useState } from 'react';
import { Button, Form, Input, Toast } from 'antd-mobile';
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { login } from './server'
import styles from './index.less';

const LoginPage = () => {
  const [visible, setVisible] = useState(false)

  const onFinish = async (values: any) => {
    const msg = await login({ ...values });
    if (msg.access_token) {
      Toast.show({
        icon: 'success',
        content: '保存成功',
      })
      window.localStorage.setItem('token', `${msg.token_type} ${msg.access_token}`);

      window.location.href = '/tab-bar/personalCenter';
      return;
    } else {
      Toast.show({
        icon: 'fail',
        content: msg.detail,
      });
    }
  }

  return (
    <div className={styles['login-page-wrap']}>
      <div className={styles.title}>内容管理</div>
      <Form
        layout='horizontal'
        onFinish={onFinish}
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Item
          name='account'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input placeholder='请输入姓名' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <div className={styles.password}>
            <Input
              className={styles.input}
              placeholder='请输入密码'
              type={visible ? 'text' : 'password'}
            />
            <div className={styles.eye}>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};

export default LoginPage;
